﻿@page "/chart/semi-pie"

@using Syncfusion.Blazor
@using ThemeHelper
@using Syncfusion.Blazor.Charts

@inject NavigationManager NavigationManager
@inherits SampleBaseComponent;

<SampleDescription>
    <p>This sample shows the percentage of agricultural land in different countries using a semi pie chart.</p>
</SampleDescription>
<ActionDescription>
    <p>In this example, you can see how to render semi pie chart. Using <code>StartAngle</code> and <code>EndAngle</code> properties, you can achieve this requirement.</p>
    <p><code>Tooltip</code> is enabled in this example, to see the tooltip in action, hover a point or tap on a point in touch enabled devices.</p>
</ActionDescription>

<div class="control-section">
    <SfAccumulationChart Title="Agricultural Land Percentage" EnableAnimation="false" Theme="@Theme">
        <AccumulationChartTooltipSettings Enable="true"></AccumulationChartTooltipSettings>
        <AccumulationChartLegendSettings Visible="false"></AccumulationChartLegendSettings>
        <AccumulationChartSeriesCollection>
            <AccumulationChartSeries DataSource="@PieChartPoints" XName="Country" YName="LandOccupancy" Name="Agricultural" StartAngle="270" EndAngle="90" Radius="90%" InnerRadius="40%" Explode="true">
                <AccumulationDataLabelSettings Visible="true" Name="DataLabelMappingName" Position="AccumulationLabelPosition.Outside">
                    <AccumulationChartDataLabelFont FontWeight="600"></AccumulationChartDataLabelFont>
                </AccumulationDataLabelSettings>
            </AccumulationChartSeries>
        </AccumulationChartSeriesCollection>
    </SfAccumulationChart>
</div>

@code{

    private Theme Theme { get; set; }
    public List<PieData> PieChartPoints { get; set; } = new List<PieData>
    {
        new PieData { Country =  "Australia", LandOccupancy = 53, DataLabelMappingName = "AUS:37%" },
        new PieData { Country =  "China", LandOccupancy = 56, DataLabelMappingName = "CHN:15%" },
        new PieData { Country =  "India", LandOccupancy = 61, DataLabelMappingName = "IND:16%" },
        new PieData { Country =  "Japan", LandOccupancy = 19, DataLabelMappingName = "JPN:19%" },
        new PieData { Country =  "South Africa", LandOccupancy = 79, DataLabelMappingName = "ZAF: 21%" },
        new PieData { Country =  "United Kingdom", LandOccupancy = 71, DataLabelMappingName = "UK: 19%" },
        new PieData { Country =  "United States", LandOccupancy = 45, DataLabelMappingName = "USA: 12%" },
    };

    protected override void OnInitialized()
    {
        Theme = ThemeHelper.GetCurrentTheme(NavigationManager.Uri);
    }

    public class PieData
    {
        public string Country { get; set; }
        public double LandOccupancy { get; set; }
        public string DataLabelMappingName { get; set; }
    }
}
